<template>
  <div class="app-container">
    <!-- 分类 -->
    <el-card class="box-card" :span="24">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: center; margin-top: 20px">
        <el-form-item label="项目名称">
          <el-input v-model="formInline.itemName" placeholder="项目名称" @blur="findNoJoinItem"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="formInline.deptName" placeholder="请选择部门" @blur="findNoJoinItem">
            <el-option label="不限" value=""></el-option>
            <el-option v-for="dept in deptList" :key="dept.index" :label="dept.deptName" :value="dept.deptName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findNoJoinItem">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-for="item in itemList" :key="item.index" class="box-card" :span="24">
      <el-row>
        <el-col :span="5">
          <img :src="item.trainCover" height="110px" style="margin-top: 10px"/>
        </el-col>
        <el-col :span="16">
          <table width="100%" style="font-size: 16px; color: grey; line-height: 2em">
            <thead>
              <td style="font-size: 18px; font-weight: bold; color: black; line-height: 2em">{{item.trainTitle}}</td>
              <td colspan="2" style="font-size: 16px; color: grey; line-height: 2em">{{item.trainDescription | textHandle1(item.trainDescription)}}</td>
            </thead>
            <tr>
              <td width="33%">部门：{{item.trainType}}</td>
              <td width="33%">难度：{{item.trainLevel}}</td>
              <td width="33%">培训形式：{{item.trainForm}}</td>
            </tr>
            <tr>
              <td>开始时间：{{(item.trainBetime || "").split("T")[0]}}</td>
              <td>结束时间：{{(item.trainEndtime || "").split("T")[0]}}</td>
              <td>报名截止时间：{{(item.applyCuttime || "").split("T")[0]}}</td>
            </tr>
          </table>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" style="margin-top: 20px" @click="apply(item.itemId)">立即报名</el-button>
        </el-col>
      </el-row>
    </el-card>



    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[2,5,8]" :page-size="formInline.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total"
        style="margin-top: 30px; margin-bottom: 20px; text-align: center;">
      </el-pagination>
  </div>
</template>

<script>
import { findAlls } from '@/api/dept'
import { findNoJoinItem } from '@/api/user'
import { applyItem } from '@/api/user'
import { Message } from 'element-ui'

  export default {
    data() {
      return {
        deptList: [],
        total: 0,
        currentPage:1,
        itemList: [],
        applyInfo: {
          itemId: 0,
          userId: this.$store.getters.userId
        },
        formInline: {
          itemName: '',
          deptName: '',
          page: 1,
          limit: 5,
          userId: this.$store.getters.userId
        }
      }
    },
     filters: { 
      /* 给培训项目详情的字段限制 */
  　　textHandle1: function(val) {
      let textNew = val
      if (val.length > 60) {
        textNew = val.slice(0, 60) + '…'
      }
      return textNew
    },
  },
    created() {
      this.getDeptList()
      this.findNoJoinItem()
    },
    methods: {
      findNoJoinItem() {
        findNoJoinItem(this.formInline).then((res) => {
          this.total = res.data.total;
          this.itemList = res.data.list;
          console.log(res.data);
        }).catch((err) => {
          console.log(err);
        });
      },
      getDeptList(){
        findAlls().then((res) => {
          this.deptList = res.data;
        }).catch((err) => {
        });
      },
      handleSizeChange(val) {
        this.formInline.limit = val
        this.findNoJoinItem()
      },
      handleCurrentChange(val) {
        this.formInline.page = val
        this.findNoJoinItem()
      },

      //报名
      apply(itemId){
        this.applyInfo.itemId = itemId;
        applyItem(this.applyInfo).then((res) => {
          Message({
            message: res.message || 'success',
            type: 'success',
            duration: 2 * 1000
          })
        }).catch((err) => {
          
        });
      }
    }
  }
</script>

<style scoped>
.box-card {
    width: 95%;
    max-width: 100%;
    margin: 20px auto;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  /* *{
    border: 1px solid red
  } */
</style>